<template>
  <div class="container">
        <!-- <div>
            <Breadcrumb separator=">">
            <span>当前位置：</span>
                <Breadcrumb-item href="/">首页</Breadcrumb-item>
                <Breadcrumb-item>贷款产品</Breadcrumb-item>
            </Breadcrumb>
        </div> -->

          <div class="title-bg marginT20">
              <Row>
                  <i-col span='2'><span style="display:inline-block;margin-top:7px;">产品名称</span></i-col>
                  <i-col span='6'><i-input v-model="searchForm.productName" placeholder="请输入..."></i-input></i-col>
                  <i-col span='2' offset='1'><i-button @click="search" type="success">搜索</i-button></i-col>
              </Row>
          </div>

          <div class="radio-bg">
              <Row>
                  <i-col span='3'>贷款期限:</i-col>
                  <i-col
                    v-for="(item,index) in loanTime"
                    :key="item"
                    span='3'>
                    <span @click="checkTime(item,index)" class="button-align">
                        <i-button v-if="index==isTime" type="success">{{item}}</i-button>
                        <span v-else>{{item}}</span>
                        
                        </span>
                   </i-col>
                  
              </Row>
          </div>
          <div class="radio-bg">
              <Row>
                  <i-col span='3'>最高贷款金额:</i-col>
                  <i-col span='3'
                    v-for="(item,index) in loanAmount"
                    :key="item"
                  >
                    <span @click="checkAmount(item,index)" class="button-align">
                        <i-button v-if="index==isAmount" type="success">{{item}}</i-button>
                        <span v-else>{{item}}</span>
                        </span>
                  </i-col>
                  
              </Row>
          </div>

          <div class="radio-bg">
              <Row>
                  <i-col span='3'>金融机构:</i-col>
                  <i-col span='1'><span class="button-align"><i-button type="success">全部</i-button></span></i-col>
                  <i-col span='2' offset='1'>工商银行</i-col>
                  <i-col span='2'>农业银行</i-col>
                  <i-col span='2'>建设银行</i-col>
                  <i-col span='2'>建设银行</i-col>
                  <i-col span='2'>建设银行</i-col>
                  <i-col span='2'>建设银行</i-col>
                  <i-col span='2'>建设银行</i-col>
                  <i-col span='2'>建设银行</i-col>
                  <i-col span='2'>更多</i-col>
              </Row>
          </div>
          
          <div class="radio-bg marginT20">
              <p>排序方式：按最低利率排序 按最高额度排序 按最长期限排序</p>
          </div>

          <div class="pro-list marginT20 cursor-point" v-for="item in proMsg" :key="item.productId">
              <productMsg :collectText='collectOrnot' :proMsg='item' @on-collect='onCollect' @receiveBtn='goProductDetail' button collect></productMsg>
          </div>
            <div class="marginT20">
                <Row class="marginT20">
                    <i-col span='14' offset='10'>
                        <Page :total="total" @on-change='pageChange' show-elevator />
                    </i-col>
                </Row> 
            </div>

  </div>
</template>

<script>
import productMsg from '@/components/productMsg'
export default {
    data(){
        return{
            proMsg:[],
            orgId:'',
            loanTime:['全部','1-3个月','3-6个月','6-9个月','9-12个月','12个月以上'],
            loanAmount:['全部','30万以下','30万-50万','50万-100万','100万-500万','500万-1000万','1000万以上'],
            isTime:0,
            isAmount:0,
            searchForm:{
                organCode:'',                   //依次是金融机构
                loanPeriodDown:'',              //最短期限
                loanPeriodUp:'',                //最长期限
                loanAmountMin:'',               //最低贷款金额
                loanAmountMax:'',               //最高贷款金额
                productName:'',                 //产品名称

                rateOrder:'',                   //利率排序
                amtOrder:'',                    //融资额度排序
                periodOrder:''                  //期限排序
            },
            total:null,
            collectOrnot:'收藏'
        }
    },
    mounted(){
        this.getProductList()
        this.getOrg()
    },
    methods:{    
        checkTime(item,idx){
            console.log(item)
            this.isTime=idx
            if(item.indexOf('-')==1){
                this.searchForm.loanAmountMin=parseInt(item.split('-')[0])
                this.searchForm.loanAmountMax=parseInt(item.split('-')[1])
            }else{
                if(isNaN(parseInt(item))){
                    this.searchForm.loanAmountMin=''
                    this.searchForm.loanAmountMax=''
                }else{
                    this.searchForm.loanAmountMin=parseInt(item)
                    this.searchForm.loanAmountMax=''
                }
            }
            this.getProductList()

        },  
        getOrg(){
            this.$axios('getProductsgetOrg',[],{}).then(res=>{
                console.log(res)
            })
        },
        pageChange(num){
            this.getProductList(num)
            
        },
        checkAmount(item,idx){
            console.log(item)
            this.isAmount=idx
            if(item.indexOf('-')==1){
                this.searchForm.loanAmountMin=parseInt(item.split('-')[0])
                this.searchForm.loanAmountMax=parseInt(item.split('-')[1])
            }else{
                if(isNaN(parseInt(item))){
                    this.searchForm.loanAmountMin=''
                    this.searchForm.loanAmountMax=''
                }else{
                    this.searchForm.loanAmountMin=parseInt(item)
                    this.searchForm.loanAmountMax=''
                }
            }
            this.getProductList()
        },
        search(){
            this.getProductList()
        },
        //列表展示
        getProductList(num){
            let page = num? num : 1
            this.$axios('getProductsgetProducts',[page,10],this.searchForm).then(res=>{
                console.log(res.data.result)
                this.proMsg=res.data.result 
                this.total=res.data.listSize

            })

        },
        onCollect(productId){
            this.collectOrnot == '收藏' ?this.productCollect(productId) : this.peoductCancelCollect(productId)
            // this.productCollect(productId)
        },
        //用户收藏产品
        productCollect(productId){
            this.$axios('getProductspostProduct',productId+'?userPhone='+this.$token.getUUID(),{}).then(res=>{
                console.log(res)
                 if(res.code==200){
                    this.collectOrnot='取消收藏'
                }    
            })
        },
        //用户收藏产品取消
        peoductCancelCollect(productId){
            this.$axios('getProductsdeleteProduct',[productId],{
                userPhone:this.$token.getUUID()
            }).then(res=>{
                console.log(res)
                 if(res.code==200){
                    this.collectOrnot='收藏'
                }    
            })
        },
        //金融机构搜索条件
        financialSearch(){
            this.$axios('getProductsgetOrg',[1,10],{}).then(res=>{
                console.log(res)
                
            })
        },
        goProductDetail(productId){
            this.$router.push({
                path:'/financingProductsDetails',
                query:{
                    productId:productId
                }
            })
        }
    },
    components:{
        productMsg
    }
}
</script>

<style>
.content{
    padding: 30px;
}
.title-bg{
    padding: 10px 30px;
    background-color: #F3F3F3;
}
.ivu-breadcrumb>span{
  font-weight: 400;
  color: #000;
}
.radio-bg{
    padding: 10px 30px;
    background-color: #F9F9F9;
}
.pro-list{
    padding: 30px;
    box-shadow: 0 0 3px #666666;
    border-radius: 5px;
}

</style>